<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <script src="../wh2114/vuedemo/lib/vue-router.js"></script>
    <link rel="stylesheet" href="../wh2114/vuedemo/lib/animate.css" />
  </head>
  <style>
    .box {
      width: 170px;
      height: 170px;
      background: darkcyan;
    }
    table {
      border: 1px solid #000;
    }
    td {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
    }
    ul {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
    }
    li {
      width: 200px;
      background: pink;
    }

    .zoom-enter-active {
      animation: zoomInDown 0.9s;
    }

    .zoom-leave-active {
      animation: zoomOutDown 0.9s;
    }

    .box {
      width: 50%;
      height: 300px;
      border: 1px solid #999;
      border-radius: 10px;
    }
    .router-link-exact-active,
    .router-link-active {
      font-size: 30px;
      font-weight: bold;
      color: #f50;
    }
  </style>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <myhead></myhead>
      <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
      <router-view class="box"></router-view>
      <hr />
      <!-- 6 路由跳转 声明式 -->
      <a href="#/home">首页1</a>
      <!-- <router-link to="/home">首页</router-link> -->
      <router-link to="/find">发现</router-link>
      <router-link to="/mine">我的</router-link>
      <router-link to="/aboutus">联系我们</router-link>
      <router-link to="/404">404</router-link>
    </div>

    <template id="home">
      <div>
        <h2>HOme = Home = Home</h2>
      </div>
    </template>

    <template id="mine">
      <div>
        <h2>Mine-mine-个人中心</h2>
      </div>
    </template>

    <script>
      Vue.component("myhead", {
        template: "<h2>Head-wh2114-daydayup</h2>",
      });
      // 1. 定义路由组件.
      const Home = {
        template: "#home",
      };
      const Find = {
        template: "<h2>Find-Find-Find</h2>",
      };
      const Mine = {
        template: "#mine",
      };
      const NotFound = {
        template: "<h2>404-404 - NotFound </h2>",
      };

      const Aboutus = {
        template: "<h2>关于我们 - aboutus - abouts </h2>",
      };
      // 2. 定义一些路由
      // 每个路由都需要映射到一个组件。
      const routes = [
        { path: "/home", component: Home },
        { path: "/find", component: Find },
        { path: "/mine", component: Mine },
        { path: "/aboutus", component: Aboutus },

        {
          path: "/404",
          component: NotFound,
        },
      ];

      // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
      // # 表示 hash 路由
      const router = new VueRouter({
        routes: routes,
      });
      // 4. 路由挂载到根实例
      const vm = new Vue({
        router,
        data: {
          title: "Vue 路由初步",
        },
        component: {},
        watch: {
          $route: function (to, from) {
            console.log(to);
            console.log(from);
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
          console.log(this.$router); // 路由对象  负责路由跳转 路由导航和路由全局监听
          console.log(this.$route); // 路由信息对象  当前激活的路由对象
        },
      }).$mount("#app");
    </script>
    <!-- 
        node 路由 根据不同的url接口 返回对应的不同的数据或者页面  (Later)
        Vue 路由 router 根据不同的url路径 pathname  匹配路由里面的 path 匹配成功就加载对应的组件(component)
        
        Vue-Router 是 Vue.js 官方的路由管理器。
        它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
        
        路由作用 实现构建单页面应用  index.html 其他页面 组件形式加载
        single-page-application     (SPA)-

        将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

        a. 掌握 配置最基本的路由 流程
        b. 路由传递参数  动态路由
        c. 嵌套路由
     -->
  </body>
</html>
